<template>
    <div>
        <el-tabs tab-position="left" style="height: 550px;">
            <el-tab-pane label="常规">
                <el-form label-width="100px">
                    <el-form-item label="模块标题：">
                        <el-input v-model="active_component.propValue.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="模块样式：">
                        <div class="flex-around jz_box">
                            <div
                                class="jz-photo-group"
                                :class="active_component.propValue.tabIndex == 0 ? 'group_active' : ''"
                                @click="changetab(0)"
                                >
                                <div class="jz_style_img_0 jz_style_img"></div>
                            </div>
                            <!-- <div
                                class="jz-photo-group"
                                :class="active_component.propValue.tabIndex == 1 ? 'group_active' : ''"
                                @click="changetab(1)"
                                >
                                <div class="jz_style_img_1 jz_style_img"></div>
                            </div> -->
                            <div
                                class="jz-photo-group"
                                :class="active_component.propValue.tabIndex == 3 ? 'group_active' : ''"
                                @click="changetab(3)"
                                >
                                <div class="jz_style_img_3 jz_style_img"></div>
                            </div>
                            <div
                                class="jz-photo-group"
                                :class="active_component.propValue.tabIndex == 4 ? 'group_active' : ''"
                                @click="changetab(4)"
                                >
                                <div class="jz_style_img_4 jz_style_img"></div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="index == '0'">
                        <p>注：图片间的宽高比不同才有效果</p>
                    </el-form-item>
                    <el-form-item v-if="index == '4'">
                     <!-- swiperList -->
                     <el-button type="primary" @click="addSwiperlist" size="small">新增列表</el-button>
                     <el-tag style="margin-left:10px;">当前列表数{{active_component.propValue.swiperList.length}}</el-tag>
                      <div class="flex">背景图： <img :src=" active_component.propValue.backgroundImage" style="width:100px;height:100px;object-fit: cover;" alt=""> </div>
                      <div class="flex">背景图链接：  <el-input style="width:200px" v-model=" active_component.propValue.backgroundImage"></el-input> </div>
                      <div class="flex">背景渐变开始： <el-color-picker v-model=" active_component.propValue.backgroundColor.left" show-alpha></el-color-picker> </div>
                      <div class="flex">背景渐变结束： <el-color-picker v-model=" active_component.propValue.backgroundColor.right" show-alpha></el-color-picker> </div>
                     <div class="swiper_item_prop" v-for="(item,i) of active_component.propValue.swiperList" :key="i">
                     <div style="font-weight:bold;"> 列表{{i+1}}</div>
                        <div class="flex">日期：  <el-input style="width:200px" v-model="item.day"></el-input> </div>
                        <div class="flex">月份：  <el-input style="width:200px" v-model="item.month"></el-input> </div>
                        <div class="flex">标题1：  <el-input style="width:200px" v-model="item.title1"></el-input> </div>
                        <div class="flex">标题2：  <el-input style="width:200px" v-model="item.title2"></el-input> </div>
                        <div class="flex">文本：<el-input style="width:400px" v-model="item.text" type="textarea"></el-input> </div>
                        <div class="flex">图片：<el-input style="width:400px" v-model="item.img"></el-input> </div>
                        <img :src="item.img" style="width:100px;height:100px;object-fit: cover;" alt="">
                        <Upload :type="'primary'" :text="'点击上传图片'" @confrim="(e)=>{confrim2(e,i)}"></Upload>

                     </div>

                    </el-form-item>
                    <!-- <el-form-item label="添加图片：">
                        <el-radio v-model="radio" label="11">直接添加</el-radio>
                        <el-radio v-model="radio" label="22">绑定图册</el-radio>
                    </el-form-item> -->
                    <el-form-item v-if="active_component.propValue.tabIndex != 4 ">
                        <div class="addPicture flex">
                            <div v-if="active_component.propValue.img.length" class="flex flex-wrap img-margin">
                            <div class="img_item" v-for="(item,i) in active_component.propValue.img" :key="i">
                               <img  style="width:90px;height:60px;object-fit:cover;margin:5px" :src="item" alt="">
                               <i @click="deleteImgItem(i)"  class="closeBtn el-icon-circle-close"></i>
                            </div>
                            </div>
                        </div>
                        <Upload :type="'primary'" :text="'点击添加图片'" @confrim="(e)=>{confrim(e)}"></Upload>
                    </el-form-item>
                    <el-form-item label="图片尺寸" v-if="active_component.propValue.tabIndex == 0">
                       <div class="flex">
                            <div>宽度(px)
                                <el-input  style="width:100px"  v-model="active_component.propValue.imgwidth" placeholder="请输入宽度"></el-input>
                            </div>
                            <div style="margin-left: 10px;">高度(px)
                                <el-input style="width:100px;" v-model="active_component.propValue.imgheight" placeholder="请输入高度"></el-input>
                            </div>
                       </div>
                    </el-form-item>

                     <el-form-item label="多列布局" v-if="active_component.propValue.tabIndex == 3">
                       <div class="flex">
                         <el-input type="number" v-model="active_component.propValue.lineType" min="2" style="width:150px;" size="small" ></el-input>
                       </div>
                    </el-form-item>

                    <!-- <el-collapse v-model="activeNames">
                        <el-collapse-item title="图片设置" name="1">
                            <el-form-item label="图片描述：">
                                <el-radio v-model="radio" label="1">显示</el-radio>
                                <el-radio v-model="radio" label="2">隐藏</el-radio>
                            </el-form-item>
                            <el-form-item label="点击图片：">
                                <el-radio v-model="radio" label="3">默认</el-radio>
                                <el-radio v-model="radio" label="4">幻灯片</el-radio>
                                <el-radio v-model="radio" label="5">无效果</el-radio>
                            </el-form-item>
                            <el-form-item label="打开方式：">
                                <el-radio v-model="radio" label="6">当前窗口</el-radio>
                                <el-radio v-model="radio" label="7">新窗口</el-radio>
                            </el-form-item>
                        </el-collapse-item>
                    </el-collapse> -->
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="图片特效">
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="鼠标悬停效果" name="1">
                        <div class="flex-around jz_box1">
                            <div
                                class="jz-photo-group1"
                                :class="active_component.propValue.tabIndex == 5 ? 'group_active' : ''"
                                @click="changetab(5)"
                                >
                                <div class="jz_style_img_01 jz_style_img1"></div>
                            </div>
                            <div
                                class="jz-photo-group1"
                                :class="active_component.propValue.tabIndex == 6 ? 'group_active' : ''"
                                @click="changetab(6)"
                                >
                                <div class="jz_style_img_11 jz_style_img1"></div>
                            </div>
                            <div
                                class="jz-photo-group1"
                                :class="active_component.propValue.tabIndex == 7 ? 'group_active' : ''"
                                @click="changetab(7)"
                                >
                                <div class="jz_style_img_21 jz_style_img1"></div>
                            </div>
                            <div
                                class="jz-photo-group1"
                                :class="active_component.propValue.tabIndex == 8 ? 'group_active' : ''"
                                @click="changetab(8)"
                                >
                                <div class="jz_style_img_31 jz_style_img1"></div>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="高级">高级</el-tab-pane>
        </el-tabs>
        <div class="flex-center" style="margin-top:10px;">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import Upload  from "../Upload/index.vue";
import { log } from 'mathjs';
export default {
    props: ["componentId", "componentList",'activeCompont'],
    components: {
        Upload,
    },

    data() {
        return {
            tabIndex: 0,
            active_component: {},
            activeNames: ['1'],
            index: ''
        }
    },
    created() {
        let WalkSwiperList=JSON.parse(localStorage.getItem('WalkLineList'))?JSON.parse( localStorage.getItem('WalkLineList')):[]
        if(this.activeCompont){
            this.active_component =this.activeCompont
        }else{
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&
                    this.componentList[key].propValue.value == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                    if(!WalkSwiperList.length){
                        this.active_component.propValue.nameKey='walkLine'
                    }else{
                        this.active_component.propValue.nameKey='walkLine'+(new Date().getTime())
                    }
                }
            }
        }
    },
    methods: {
        confrim(e){
            this.active_component.propValue.img.push(e)
        },
        addSwiperlist(){
             this.active_component.propValue.swiperList.push({
                day:'24',
                month:'八月',
                title1:'SHN48',
                title2:'易家讯科',
                text:'《盛夏好声音》是SNH482015年发行的第八张EP，也是SNH48第二张总选投票专辑，共收录了《盛夏好声音》、《自我主张》、《亲吻进行式》、《眼神加速度》、《清纯哲学》5首歌曲 ',
                img:'https://1.s140i.faiusr.com/2/AIwBCAAQAhgAIJr17NUFKMHkwcsBMIAPOIAK!300x300.jpg.webp',
             })
        },
        confrim2(e,i){
              this.active_component.propValue.swiperList[i].img=e
              console.log(this.active_component.propValue.swiperList[i].img)
        },
        deleteImgItem(i){
            this.active_component.propValue.img.splice(i,1)
        },
        onremove(){
           this.active_component.propValue.img=''
        },
        loadSuccess(res){
            console.log(res);
            this.active_component.propValue.img=res.data
        },
        closeTK(){
            this.$emit("closeTK")
        },
        changetab(i) {
            console.log(i);
            this.index = i
            this.active_component.propValue.tabIndex = i;
            if(i==4){
                // this.active_component.style.width=1600
                //  this.active_component.style.height=900
            }
        },
        getMappingValueArrayOfKey(array,keyName){
            if(Object.prototype.toString.call(array)=='[object Array]'){
                return array.map((item,index)=>{
                    return item[keyName]
                })
            }
            return 'null（参数一应为对象数组）';//不是数组
        },
       async pushcanvas() {
            if(this.active_component.propValue.tabIndex==4){
                let WalkSwiperList=JSON.parse(localStorage.getItem('WalkLineList'))?JSON.parse( localStorage.getItem('WalkLineList')):[]
                let keys=await this.getMappingValueArrayOfKey(WalkSwiperList,'name')
                    let active_component=this.active_component
                    if(WalkSwiperList.length){
                            if(!keys.includes(active_component.propValue.nameKey)){
                            //       WalkSwiperList[key].tabIndex=active_component.propValue.tabIndex
                            //   } else{
                                keys.push(this.active_component.propValue.nameKey)
                                await WalkSwiperList.push({name:this.active_component.propValue.nameKey,tabIndex:this.active_component.propValue.tabIndex})
                            }
                    }else{
                    keys.push(this.active_component.propValue.nameKey)
                                await WalkSwiperList.push({name:this.active_component.propValue.nameKey,tabIndex:this.active_component.propValue.tabIndex})
                    }
                localStorage.setItem('WalkLineList',JSON.stringify(WalkSwiperList))
            }
            //从list中筛选出对应的jsan
            //   for (let key in this.componentList) {
            //     if (
            //       this.componentList[key].isDialog &&
            //       this.componentList[key].propValue.value == this.componentId
            //     ) {
            //       console.log(this.componentList[key]); //获取到对应组件数据
                // 进行添加缓存/vuex
            //   let canvasData = JSON.parse(localStorage.getItem("canvasData"));
       if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK")//关闭弹框
        }else{
            let canvasStyle = JSON.parse(localStorage.getItem("canvasStyle"));
            let component = this.active_component;

            component.style.top = Number(canvasStyle.height);
            component.style.left = 0;
                //   canvasData.push(component);
                //   localStorage.setItem("canvasData", JSON.stringify(canvasData));
                //   localStorage.setItem("canvasStyle", JSON.stringify(canvasStyle));
            this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
                Number(canvasStyle.height) + Number(component.style.height)
            );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
            //     }
              }
        },
    }
}
</script>

<style lang="scss" scoped>

.el-collapse {
    margin-left: 18px;
}
.el-collapse-item {
    margin-left: 0;
}
// 添加图片框
.addPicture {
    margin: 15px 0 15px 18px;
    width: 550px;
    min-height: 78px;
    padding: 10px;
    border: 1px dashed #ccc;
}
.img_item{
    position: relative;
    display: flex;
    align-items: center;
}
.closeBtn{
    position: absolute;
    top: -4px;
    right: -3px;
    z-index: 9;
    font-size: 20px;
    cursor: pointer;
    background: #fff;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
.addPicture .jz_upload_icon {
    width: 25px;
    height: 25px;
    // background-position: -257px -33px;
}

.addPicture .jz_upload_label {
    display: inline-block;
    height: 32px;
    // margin-left: 230px;
    line-height: 32px;
    font-size: 13px;
    vertical-align: middle;
}


.jz_box {
    width: 220px;
}
.jz-photo-group {
    width: 64px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img {
        width: 62px;
        height: 48px;
        background: url("../../assets/iconfont/mbg02.png") no-repeat;
    }
    .jz_style_img_0 {
        background-position: -1px -471px;
    }
    .jz_style_img_1 {
        background-position: -315px -507px;
    }
    .jz_style_img_2 {
        // background-position: -314px -74px;
        background: url(https://2.ss.faisys.com/image/v2/imageEffect_marquee.gif?v=202104251101);
    }
    .jz_style_img_3 {
        background-position: -574px -915px;
    }
    .jz_style_img_4 {
        background: url(https://2.ss.faisys.com/image/v2/imageEffect_accordion.gif?v=202104251101);
    }
}
.group_active {
    border: 1px solid #5874d8 !important;
    position: relative;
}
.group_active::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 24px;
    background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
.swiper_item_prop>div{
    margin-bottom: 10px;
}

.jz_box1 {
    width: 540px;
}
.jz-photo-group1 {
    width: 115px;
    height: 95px;
    margin: 0 20px 20px 0;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img1 {
        width: 113px;
        height: 93px;
        background: url("../../assets/iconfont/mbg02.png") no-repeat;
    }
    .jz_style_img_01 {
        background-position: -416px 1px;
    }
    .jz_style_img_11 {
        background-position: -416px -117px;
    }
    .jz_style_img_21 {
        background-position: -416px -233px;
    }
    .jz_style_img_31 {
        background-position: -416px -349px;
    }
    // .jz_style_img_41 {
    //     background-position: -574px -211px;
    // }
}
.group_active {
    border: 1px solid #5874d8 !important;
    position: relative;
}
.group_active::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 24px;
    background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}

</style>
